<template>
  <div>
    <p class="font"><b>在线用户</b><span class="iconfont color" style="font-size: 20px;margin-left: 16px;">&#xe616;</span><span>{{tableData.length}}</span></p>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
<!--      用户的icon-->
      <el-table-column
        size="small"
        width="24"
      >
        <template  slot-scope="scope">
          <span class="iconfont color">&#xe667;</span>
        </template>
      </el-table-column>
<!--      用户-->
      <el-table-column
        label="用户"
        prop="name"
      >
      </el-table-column>
<!--      登录时间-->
      <el-table-column
        label="登录时间"
        prop="date">
      </el-table-column>
<!--      关键字搜索-->
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "userLiving",
    data(){
      return{
        tableData: [],
        search: ''
      }
    },
    created() {
      this.getUserLiving();
    },
    methods:{
      getUserLiving() {
        this.$http({
          url: this.$http.adornUrl('/generator/home/getOnlinePeople'),
          method: 'get',
        }).then((res) => {
          console.log(24356);
          console.log(res);
          this.datanull();
        })
      },
      datanull(){
        document.getElementsByClassName("el-table__empty-text")[0].innerHTML="当前无用户登录"
      }

    }
  }
</script>

<style scoped>
  .color{
    color: #0BB2D4!important;
  }
  .font{
    font-size: 20px;
  }
</style>
